<template>
	<div class="page-info">
		<div class="search">
			<div class="search-box">
				<a-form
					:model="searchInfo"
					:label-col="labelCol"
					:wrapper-col="wrapperCol"
				>
					<a-row :gutter="24">
						<a-col :span="8">
							<a-form-item :name="'refererNickname'" label="推荐人编码">
								<a-input
									style="width: 90%; margin-left: 8px"
									v-model:value="searchInfo.refererCode"
									placeholder="请填写推荐人编码"
									allow-clear
								/>
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item :name="'refererNickname'" label="推荐人">
								<a-input
									style="width: 90%; margin-left: 8px"
									v-model:value="searchInfo.refererNickname"
									placeholder="请填写推荐人"
									allow-clear
								/>
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item :name="'nickname'" label="用户名">
								<a-input
									style="width: 90%; margin-left: 8px"
									v-model:value="searchInfo.nickname"
									placeholder="请填写用户名"
									allow-clear
								/>
							</a-form-item>
						</a-col>
					</a-row>
					<a-row :gutter="24">
						<a-col :span="8">
							<a-form-item :name="'code'" label="编码">
								<a-input
									style="width: 90%; margin-left: 8px"
									v-model:value="searchInfo.code"
									placeholder="请填写编码"
									allow-clear
								/>
							</a-form-item>
						</a-col>
						<a-col :span="14" style="text-align: right; margin-bottom: 20px">
							<a-space>
								<a-button type="primary" @click="query">查找</a-button>
								<a-button type="primary" @click="cancelQuery">清空</a-button>
							</a-space>
						</a-col>
					</a-row>
				</a-form>
			</div>
		</div>
		<div class="content">
			<a-table
				:dataSource="dataSource"
				:columns="columns"
				:loading="loading"
				:row-key="(record) => record.id"
				:pagination="pagination"
				@change="handleTableChange"
				:scroll="{ y: 470, x: 'max-content' }"
			>
				<template #bodyCell="{ column, record }">
					<template v-if="column.key === 'status'">
						<a-tag
							:color="
								record.status === 1 ? 'green'
								: record.status === 0 ? 'orange'
								: 'red'
							"
						>
							{{
								record.status === 1 ? '已支付'
								: record.status === 0 ? '待支付'
								: '取消'
							}}
						</a-tag>
					</template>
				</template>
			</a-table>
		</div>
	</div>
</template>
<script setup lang="ts">
import { message } from 'ant-design-vue';
import { getCommissionInfoPage } from './api/index';
import { columns, type pageInfo, pagination, type SearchInfo } from './config/index';

const labelCol = ref({ span: 5 });
const wrapperCol = ref({ span: 19 });

let searchInfo = ref<SearchInfo>({});

let loading = ref<boolean>(false);

let dataSource = ref();

const getListPage = (param: SearchInfo, cur: pageInfo): void => {
	loading.value = true;
	getCommissionInfoPage(param, cur.current, cur.pageSize)
		.then((res) => {
			if (res.code == '200') {
				dataSource.value = res.data.records;
				pagination.value.current = res.data.current;
				pagination.value.pageSize = res.data.size;
				pagination.value.total = res.data.total;
			} else {
				message.error((res && res.message) || '查询列表失败！');
			}
		})
		.finally(() => {
			loading.value = false;
		});
};

const init = (): void => {
	getListPage(searchInfo.value, pagination.value);
};

const cancelQuery = (): void => {
	searchInfo.value = {};
};

const query = (): void => {
	getListPage(searchInfo.value, pagination.value);
};

const handleTableChange = (paginationArg: any): void => {
	getListPage(searchInfo.value, paginationArg);
};

init();
</script>
<style lang="scss" scoped>
.page-info {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.search {
	flex: 0 0 auto;
}

.content {
	flex: 1 1 auto;
	overflow: auto;
	display: flex;
	flex-direction: column;
}
</style>
